<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>易能旅游网站--线路管理</title>
	<%@ include file="/pages/common/common.jsp" %>	
	<script type="text/javascript" src="${ctx}/js/jquery/jquery-easyui-1.2.5/datagrid-detailview.js"></script>
    <script type="text/javascript">
    jQuery(function($){
		$('#gridTable').datagrid({
			title:'线路列表', //标题
			method:'post',
			iconCls:'icon-edit', //图标
			singleSelect:true, //单选
			height:360, //高度
			fitColumns: true, //自动调整各列，用了这个属性，下面各列的宽度值就只是一个比例。
			striped: true, //奇偶行颜色不同
			collapsible:true,//可折叠
			url:"${ctx}/admin/route/query.adm", //数据来源
			sortName: 'routeId', //排序的列
			sortOrder: 'desc', //倒序
			remoteSort: true, //服务器端排序
			idField:'createDate', //主键字段
			queryParams:{}, //查询条件
			pagination:true, //显示分页
			rownumbers:true, //显示行号
			columns:[[
				{field:'ck',checkbox:true,width:2}, //显示复选框
				{field:'routeName',title:'线路名',width:25},
				{field:'orgCityCn',title:'出发目的地',width:25,sortable:true},
				{field:'dstCityCn',title:'到达目的地',width:25,sortable:true},
				{field:'countryName',title:'国家',width:25,sortable:true},
				{field:'day',title:'几天',width:15,sortable:true},
				{field:'night',title:'几夜',width:15,sortable:true},
				{field:'status',title:'线路状态',width:15,sortable:true,
					formatter:function(value,row,index){
						switch(row.status){
							case ${constant.ROUTE_STATUS_OPEN}:
								return '开通';
								break;
							case ${constant.ROUTE_STATUS_CLOSE}:
								return '关闭';
								break;
							case ${constant.ROUTE_STATUS_INVALID}:
								return '<span title="还没有设置详细路线">无效</span>';
								break;
							default:
								return '未知';
								break;
						}
					}	
				},
				{field:'hot',title:'推荐线路',width:20,
					formatter:function(value,row,index){
						if(row.hot==0){
							return '不是';
						}else{
							return '是';
						}
					}	
				},
				{field:'createDate',title:'创建日期',width:20}
			]],
			toolbar:[{
				text:'新增',
				iconCls:'icon-add',
				handler:function(){
					addrow();
				}
			},'-',{
				text:'更新',
				iconCls:'icon-edit',
				handler:function(){
					updaterow();
				}
			},'-',{
				text:'删除',
				iconCls:'icon-remove',
				handler:function(){
					deleterow();
				}
			},'-',{
				text:'编辑线路详情',
				iconCls:'icon-edit',
				handler:function(){
					openDetail();
				}
			},'-',{
				text:'开通',
				iconCls:'icon-ok',
				handler:function(){
					updateStatus(${constant.ROUTE_STATUS_OPEN});
				}
			},'-',{
				text:'关闭',
				iconCls:'icon-close',
				handler:function(){
					updateStatus(${constant.ROUTE_STATUS_CLOSE})
				}
			},'-',{
				text:'重新初始化价格',
				iconCls:'icon-reload',
				handler:function(){
					updateStatus(${constant.ROUTE_STATUS_OPEN});
				}
			}],
			onLoadSuccess:function(){
				$('#gridTable').datagrid('clearSelections'); //一定要加上这一句，要不然datagrid会记住之前的选择状态，删除时会出问题
			},
			view: detailview,  
		    detailFormatter:function(index,row){  
		        return '<div style="padding:3px"><table id="ddv-' + index + '"></table></div>';  
		    },  
		    onExpandRow: function(index,row){  
		        $('#ddv-'+index).datagrid({  
		            url:'${ctx}/admin/route/queryDetail.adm?routeId='+row.routeId,  
		            fitColumns:false,  
		            singleSelect:true,  
		            rownumbers:true,  
		            loadMsg:'正在加载线路详情',  
		            height:'auto',  
		            columns:[[  
		                {field:'whichDay',title:'第几天',width:60},  
		                {field:'depart',title:'出发',width:150},  
		                {field:'arrivel',title:'到达',width:150},
		                {field:'cityCn',title:'目的地',width:150}
		            ]],  
		            onResize:function(){  
		                $('#gridTable').datagrid('fixDetailRowHeight',index);  
		            },  
		            onLoadSuccess:function(){  
		                setTimeout(function(){  
		                    $('#gridTable').datagrid('fixDetailRowHeight',index);  
		                },0);  
		            }  
		        });  
		        $('#gridTable').datagrid('fixDetailRowHeight',index);  
		    }
		});		
		//填充查询条件中的出发列表
		$("#qorgCityId").combobox({
			valueField:'cityId', //值字段
		    textField:'cityCn', //显示的字段
		    url:'${ctx}/common/queryAllCity.con',
		    panelHeight:'auto',
			editable:false//不可编辑，只能选择
		});
		
		//填充查询条件中的到达列表
		$("#qdstCityId").combobox({
			valueField:'cityId', //值字段
		    textField:'cityCn', //显示的字段
		    url:'${ctx}/common/queryAllCity.con',
		    panelHeight:'auto',
			editable:false//不可编辑，只能选择
		});
		
	});
    /** 新增 */
    function addrow(){
    	$("#MyPopWindow").window({
  			title:'第一步：增加线路基本信息',
  			href:'${ctx}/pages/back/route/add_route.jsp',
  			width:600,
  			height:300,
  			onLoad: function(){
  				//填充查询条件中的出发列表
				$("#orgCityId").combobox({
					valueField:'cityId', //值字段
				    textField:'cityCn', //显示的字段
				    url:'${ctx}/common/queryAllCity.con',
				    panelHeight:'auto',
					editable:false//不可编辑，只能选择
				});
				
				//填充查询条件中的到达列表
				$("#dstCityId").combobox({
					valueField:'cityId', //值字段
				    textField:'cityCn', //显示的字段
				    url:'${ctx}/common/queryAllCity.con',
				    panelHeight:'auto',
					editable:false//不可编辑，只能选择
				});
  				
  				$('#cityForm').form('clear');
  				$("#hotelPdf").val("点击上传");
  			}
  			
  		});
	}
    /** 更新 */
    function updaterow(){
		var rows = $('#gridTable').datagrid('getSelections');//json：[{},{}]
		//这里有一个jquery easyui datagrid的一个小bug，必须把主键单独列出来，要不然不能多选
		if(rows.length==0){
			$.messager.alert('提示','请选择你要更新的线路','info');
			return;
		}
		if(rows.length > 1){
			$.messager.alert('提示','只能选择一个线路进行更新','info');
			return;
		}
		$("#MyPopWindow").window({
  			title:'更新线路基本信息',
  			href:'${ctx}/pages/back/route/update_route.jsp',
  			width:600,
  			height:300,
  			onLoad: function(){			
  				//自动将数据填充到表单中，无需再查询数据库
  				$("#routeForm").form('load', rows[0]);
  			}
  		});
	}
  	
    /** 删除 */
  	function deleterow(){
  		$.messager.confirm('提示','确定要删除吗?',function(result){
	        if (result){
	        	var rows = $('#gridTable').datagrid('getSelections');
	        	var ps = "routeId="+rows[0].routeId;
	        	$.post('${ctx}/admin/route/del.adm?'+ps,function(data){
	        		if(data.success){//操作成功
						$.messager.alert('提示','操作成功','info');
	        			$('#gridTable').datagrid('reload');//刷新数据
					}else{
						$.messager.alert('提示',data.msg,'warning');	
					}
	        	});
	        }
	    });
  	}
    
     /** 打开编辑线路详情对话框 */
    function openDetail(){
		var rows = $('#gridTable').datagrid('getSelections');//json：[{},{}]
		if(rows.length==0){
			$.messager.alert('提示','请选择你要编辑的线路','info');
			return;
		}
		if(rows.length > 1){
			$.messager.alert('提示','只能选择一个线路地进行编辑','info');
			return;
		}
		$("#MyPopWindow").window({
  			title:'编辑线路['+rows[0].routeName+']的详情',
  			href:'${ctx}/pages/back/route/add_detail.jsp',
  			width:600,
  			height:300,
  			maximizable:true,
		  	resizable:true,
  			onLoad: function(){
  				editDetail(rows[0].routeId);
  			}
  		});
	}
    
    /** 表格查询 */
	function searchRoute(){
		var fields =$('#queryForm').serializeArray(); //自动序列化表单元素为JSON对象数据格式如下
		var params={};
		$.each( fields, function(i, field){//设置查询参数
			params[field.name] = field.value; 
		});
		$('#gridTable').datagrid('reload',params); //设置好查询参数 reload 一下就可以了
	}
	/** 清空查询条件 */
	function clearForm(){
		$('#queryForm').form('clear');
	}
	
	/** 增加 */
	function add(){
		var r = $('#routeForm').form('validate');
		if(!r) {
			return false;
		}
		if(parseInt($('#add_day').val())<parseInt($('#add_night').val())){
			$.messager.alert('提示','白天数不能少于夜晚数','info');
			return false;
		}
		if(parseInt($('#add_day').val())-parseInt($('#add_night').val())>1){
			$.messager.alert('提示','夜晚数与白天数不匹配，请检查','info');
			return false;
		}
		
		var url="${ctx}/admin/route/add.adm";
		$.post(url,$("#routeForm").serializeArray(),function(data){
			if(data.success){//操作成功
				//$.messager.alert('提示','操作成功','info');
				$('#gridTable').datagrid('reload');//刷新数据
				$('#MyPopWindow').window('close');//关闭窗口
				$("#MyPopWindow").window({
		  			title:'第二步：编辑线路详细信息',
		  			href:'${ctx}/pages/back/route/add_detail.jsp',
		  			width:600,
		  			height:300,
		  			maximizable:true,
		  			resizable:true,
		  			onLoad: function(){
		  				editDetail(data.routeId);
		  			}
		  		});
			}else{
				$.messager.alert('提示',data.msg,'warning');	
			}
		});
	}
	
	/** 更新 */
	function update(){
		var r = $('#routeForm').form('validate');
		if(!r) {
			return false;
		}
		var url="${ctx}/admin/route/update.adm";
		$.post(url,$("#routeForm").serializeArray(),function(data){
			if(data.success){//操作成功
				$('#MyPopWindow').window('close');
				$.messager.alert('提示','操作成功','info');
				$('#gridTable').datagrid('reload');
			}else{
				$.messager.alert('提示',data.msg,'warning');	
			}
		});
	}
	
	/** 更新状态 */
	function updateStatus(status){
		var rows = $('#gridTable').datagrid('getSelections');//json：[{},{}]
		if(rows.length==0){
			$.messager.alert('提示','请选择你要操作的线路','info');
			return;
		}
		if(rows.length > 1){
			$.messager.alert('提示','只能选择一个线路地进行操作','info');
			return;
		}
		var url="${ctx}/admin/route/updateStatus.adm";
		var param={routeId:rows[0].routeId,status:status};
		$.post(url,param,function(data){
			if(data.success){//操作成功
				$.messager.alert('提示','操作成功','info');
				$('#gridTable').datagrid('reload');
			}else{
				$.messager.alert('提示',data.msg,'warning');	
			}
		});
	}
	
	/** 编辑线路详情 */
	function editDetail(routeId){
		$("#detailGrid").datagrid({
			//title:'路线详情列表',
			//iconCls:'icon-edit',
			noheader:true,//没有标题栏
			fitColumns:true,
			height:200,
			singleSelect:true,
			idField:'detailId',
			url:'${ctx}/admin/route/queryDetail.adm?routeId='+routeId,
			columns:[[
				{field:'whichDay',title:'第几天',width:60,
					formatter:function(value,row,index){
						return '第'+value+'天';
					}	
				},  
		        {field:'depart',title:'出发',width:150,editor:{type:'validatebox',options:{validType:'length[2,30]'}}},  
		        {field:'arrivel',title:'到达',width:150,editor:{type:'validatebox',options:{validType:'length[2,30]'}}},
		        {field:'cityId',title:'目的地',width:150,
		        	formatter:function(value,row,index){
		        		return row.cityCn;
		        	},
		        	editor:{
		        		type:'combobox',
		        		options:{
		        			valueField:'cityId',
		        			textField:'cityCn',
		        			url:'${ctx}/common/queryAllCity.con',
		        			panelHeight:'auto',
							editable:false,
		        			required:true
		        		}//end options
		        	}//end editor
		        },//end field
		        {field:'action',title:'操作',width:80,align:'center',
					formatter:function(value,row,index){
						if (row.editing){
							var s = '<a href="#" onclick="DetailHandle.saverow('+index+');">保存</a> ';
							var c = '<a href="#" onclick="DetailHandle.cancelrow('+index+');">取消</a>';
							return s+c;
						}else{
							var e = '<a href="#" onclick="DetailHandle.editrow('+index+');">编辑</a>';
							return e;
						}
					}
				}		      
			]],
			onBeforeEdit:function(index,row){
				row.editing = true;
				DetailHandle.updateActions();
			},
			onAfterEdit:function(index,row){
				row.editing = false;
				DetailHandle.updateActions();
			},
			onCancelEdit:function(index,row){
				row.editing = false;
				DetailHandle.updateActions();
			}
		});
	}
	
	var DetailHandle={
		updateActions:function(){
			var rowcount = $('#detailGrid').datagrid('getRows').length;
			for(var i=0; i<rowcount; i++){
				$('#detailGrid').datagrid('updateRow',{
					index:i,
					row:{action:''}
				});
			}
		},
		editrow:function(index){
			$('#detailGrid').datagrid('beginEdit', index);
		},
		saverow:function(index){
			//$("#detailGrid").datagrid('acceptChanges');
			$('#detailGrid').datagrid('endEdit', index);
			if(!$("#detailGrid").datagrid('validateRow',index))
				return;
			var row=$("#detailGrid").datagrid('getRows')[index];
			//与服务器通信保存信息
			var url='${ctx}/admin/route/updateDetail.adm';
			$.post(url,row,function(data){
				if(data.success){
					//刷新本条数据
					$.post('${ctx}/admin/route/queryDetailById.adm','detailId='+row.detailId,function(data2){
						//$('#detailGrid').datagrid('updateRow',{index:index,row:data2});
						//$('#detailGrid').datagrid('refreshRow',index);
						$('#detailGrid').datagrid('reload');
					});
				}else{
					$.messager.alert('提示',data.msg,'warning');	
				}
			});				
		},
		cancelrow:function (index){
			$('#detailGrid').datagrid('cancelEdit', index);
		}	
	};
	</script>	
  </head>
  
  <body>
    <form id="queryForm" class="qform">
		<table class="qtable" width="100%">
			<tr>
				<td class="qtd">线路名：<input name="routeName" class="txt" style="width: 100px;"></td>
				<td class="qtd">出发地：<input name="orgCityId" id="qorgCityId" style="width:100px"></td>
				<td class="qtd">到达地：<input name="dstCityId" id="qdstCityId" style="width:100px"></td>
				<td class="qtd" align="center"><a href="#" onclick="clearForm();" class="easyui-linkbutton" iconCls="icon-no">清空</a></td>
			</tr>
			<tr>
				<td class="qtd">天数：<input name="startDay" class="easyui-numberbox txt" style="width:70px" precision="0">--<input name="endDay" class="easyui-numberbox txt" style="width:70px" precision="0"></td>
				<td class="qtd">&nbsp;</td>
				<td class="qtd">&nbsp;</td>
				<td class="qtd" align="center"><a href="#" onclick="searchRoute();" class="easyui-linkbutton" iconCls="icon-search">查询</a></td>
			</tr>
		</table>
	</form>
	<div class="griddiv">
		<table id="gridTable"></table>
	</div>
	<div id="MyPopWindow" modal="true" shadow="false" minimizable="false" cache="false" maximizable="false" collapsible="false" resizable="false" style="margin: 0px;padding: 0px;overflow: auto;"></div>
  </body>
</html>
